<template>
	<div class="top">
		<div class="one">
			<span :class="{active:a==1}" @click="staff">员工</span>
			<span :class="{active:a==2}" @click="move">调课</span>
			<span :class="{active:a==3}" @click="change">换课</span>
		</div>
		<div class="two">
			<el-input v-model="filedname" placeholder="请输入申请人姓名" />
			<el-input v-model="pointtea" placeholder="请输入指向老师" />
			<el-input v-model="filedcourse" placeholder="请输入申请课程" />
			<el-button class="searchBtn" type="info" :icon="Search" @click="search">搜索</el-button>
		</div>
	</div>
	<div class="part">
		<el-table :data="changeClassData" style="width: 100%" height="55vh">
		    <el-table-column prop="oldTeaName" label="申请老师" />
		    <el-table-column prop="newTeaName" label="指向老师">
				<template #default="score">
					<div>{{score.row.newTeaName==null ? "暂无" : score.row.newTeaName}}</div>
				</template>
			</el-table-column>
		    <el-table-column prop="oldSubName" label="申请课程">
				<template #default="score">
					<div>{{score.row.oldSubName==null ? "暂无" : score.row.oldSubName}}</div>
				</template>
			</el-table-column>
			<el-table-column prop="newSubName" label="指向课程">
				<template #default="score">
					<div>{{score.row.newSubName==null ? "暂无" : score.row.newSubName}}</div>
				</template>
			</el-table-column>
			<el-table-column prop="oldClazzName" label="申请班级">
				<template #default="score">
					<div>{{score.row.oldClazzName==null ? "暂无" : score.row.oldClazzName}}</div>
				</template>
			</el-table-column>
			<el-table-column prop="newClazzName" label="指向班级">
				<template #default="score">
					<div>{{score.row.newClazzName==null ? "暂无" : score.row.newClazzName}}</div>
				</template>
			</el-table-column>
			<el-table-column prop="oldTime" label="原上课时间">
				<template #default="score">
					<div>{{score.row.oldTime=="" ? "暂无" : score.row.oldTime}}</div>
				</template>
			</el-table-column>
			<el-table-column prop="newTime" label="换课时间">
				<template #default="score">
					<div>{{score.row.newTime=="" ? "暂无" : score.row.newTime}}</div>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="申请时间">
				<template #default="score">
					<div>{{score.row.createTime==null ? "暂无" : score.row.createTime}}</div>
				</template>
			</el-table-column>
			<el-table-column label="审批状态">
				<template #header>
					<el-dropdown @command="siftuser" trigger="click">
						 <span class="el-dropdown-link">
						      审批状态<el-icon class="el-icon--right"><arrow-down /></el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item command=3>全部</el-dropdown-item>
								<el-dropdown-item command=0>未审批</el-dropdown-item>
								<el-dropdown-item command=1>审批通过</el-dropdown-item>
								<el-dropdown-item command=2>审不通过</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
				<template #default = "score">
					<div style="color:#ff0000" v-if="score.row.status == 2">审批未通过</div>
					<div style="color:#6cac39" v-if="score.row.status == 1">审批通过</div>
					<div style="color:#999999" v-if="score.row.status == 0">未审批</div>
				</template>
				
			</el-table-column>
			<el-table-column label="操作" width="180px">
				<template #default = "score">
					<el-button class="onebtn" :disabled="score.row.status==0? false : true" @click="Pass(score.row.chaId)">通过</el-button>
					<el-button class="twobtn" :disabled="score.row.status==0? false : true" @click="noPass(score.row.chaId)">不通过</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			layout="prev,pager,next"
			:page-count="total"
			:page-size="pageSize"
			v-model:current-page="pageNum"	
			@current-change="changePage"
		></el-pagination>
	</div>
</template>

<script setup lang="ts">
	import {Search,CirclePlus,ArrowDown} from '@element-plus/icons-vue'
	import {reactive,ref,onMounted,defineEmits,defineProps} from 'vue'
	import {changeClassList,SearchchangeList,ApprovachangeList} from '@/api/zzx'
	import { ElMessage } from 'element-plus'
	let emit=defineEmits(["move","staff","change"])
	let prop=defineProps(["a"])
	let a=prop.a
	let filedname=ref<string>("")
	let pointtea=ref<string>("")
	let filedcourse=ref<string>("")
	//点击员工
	const staff=()=>{
		emit("staff")
	}
	//点击调课
	const move=()=>{
		emit("move")
	}
	//点击换课
	const change=()=>{
		emit("change")
	}
	//审批搜索
	const siftuser=(command)=>{
		// status = command
		// pageindex = 1
		search(command);
	}
	//分页
	const pageSize=4;
	let total=ref(0)
	let pageNum=ref(1);

	
	
	//换课表格数据
	let changeClassData=ref()
	//调取换课审批列表
	const getchangeClassList=async ()=>{
		let res = await changeClassList({
			pageindex:pageNum.value,
			pagesize:pageSize
		})
		console.log("换课审批列表",res)
		changeClassData.value=res.list
		total.value=res.num
	}
	getchangeClassList()
	//点击通过
	const Pass=async (Id)=>{
		let res=await ApprovachangeList({
			chaId:Id,
			status:1
		})
		console.log("换课中通过",res)
		if(res==undefined){
			ElMessage({
			    message: '操作成功',
			    type: 'success',
			})
			getchangeClassList()
		}
	}
	//点击不通过
	const noPass=async (Id)=>{
		let res=await ApprovachangeList({
			chaId:Id,
			status:2
		})
		console.log("换课中不通过",res)
		if(res==undefined){
			ElMessage({
			    message: '操作成功',
			    type: 'success',
			})
			getchangeClassList()
		}
	}
	//点击搜索
	const search=async (v)=>{
		let data={
			pageindex:pageNum.value,
			pagesize:pageSize,
			oldTeaName:filedname.value,
			newTeaName:pointtea.value,
			oldSubName:filedcourse.value
		}
		if(typeof v =="string"){
			data.status=v
		}
		let res = await SearchchangeList(data)
		console.log("搜索换课",res)
		changeClassData.value=res.list
		total.value=res.num
	}
	//点击分页器
	const changePage=(page)=>{
		//console.log(page)
		pageNum.value=page;
		search()
	}
</script>

<style scoped lang="less">
	.top{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.one{
			width: 16%;
			color: #666666;
			display: flex;
			align-items: center;
			justify-content: space-evenly
		}
		.active{
			font-size: 18px;
			color: #333333;
			font-weight: 600;
		}
		
	}
	.el-input{
		width: 205px;
		margin-right: 10px;
		border: none;
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
	}
	/* 表格距顶部的距离 */
	.el-table{
		margin-top: 20px;
	}
	.el-table{
		--el-table-border-color:none;
		--el-table-borde:none;
		--el-table-bg-color:none !important;    
		--el-table-header-bg-color:#f3f8fd;
		--el-table-header-text-color:#333 !important
	}
	/* 表格间隙 */
	:deep(.el-table__body) {
		-webkit-border-vertical-spacing: 9px;
	}
	:deep(.el-table .el-table__cell){
		text-align: center !important;
	}
	.onebtn{
		width: 50px;
		height: 30px;
		line-height: 30px;
		color: #fff;
		background: #6cac39;
		border: none;
		border-radius: 4px;
	}
	.twobtn{
		width: 52px;
		height: 30px;
		line-height: 30px;
		color: #fff;
		background: #ff0000;
		border: none;
		border-radius: 4px;
		margin-left: 5px;
	}
	// 分页样式
	.el-pagination{
		--el-pagination-bg-color:none;
		--el-pagination-button-disabled-bg-color:none;
		justify-content: center;
	}
</style>